<template>
	<view class="container">
		<view class="header-view content-hor">
			<image class="movie-image" mode="heightFix" :src="replaceUrl(movieInfo.mainpic)"></image>
			<!-- <canvas canvas-id="myCanvas" class="movie-image"></canvas> -->
			<!-- 需要设置一个固定宽度，否则会变形       -->
			<view class="header-right">
				<view class="title-view single-line-text">{{movieInfo.title}}</view>
				<view class="movie-att-item">
					<view class="movie-att_key">评分：</view>
					<view class="movie-att_value">{{movieInfo.rating_num}}/{{movieInfo.rating_people}}</view>
				</view>
				<view class="movie-att-item">
					<view class="movie-att_key">时间：</view>
					<view class="movie-att_value">{{movieInfo.info&&movieInfo.info['上映日期:']}}</view>
				</view>
				<view class="movie-att-item">
					<view class="movie-att_key">类型：</view>
					<view class="movie-att_value">{{movieInfo.info&&movieInfo.info['类型:']}}</view>
				</view>
				<view class="movie-att-item">
					<view class="movie-att_key">时长：</view>
					<view class="movie-att_value">{{movieInfo.info&&movieInfo.info['片长:']}}</view>
				</view>
				<view class="movie-att-item">
					<view class="movie-att_key">导演：</view>
					<view class="movie-att_value">{{movieInfo.info&&movieInfo.info['导演:']}}</view>
				</view>
				<view class="movie-att-item">
					<view class="movie-att_key">地区：</view>
					<view class="movie-att_value">{{movieInfo.info&&movieInfo.info['制片国家/地区:']}}</view>
				</view>
			</view>
		</view>

		<view class="content-title">演员表：</view>
		<scroll-view class="yugao-view" scroll-x="true">
			<view class="yugao-view_container">
				<block v-for="(cast,index) in movieInfo.celebrities" :key="index">
					<view class="casts-grid_item">
						<image class="avatar-img" mode="aspectFill" webp="true" :src="replaceUrl(cast.avatar)"></image>
						<view class='single-line-text'>{{cast.name}}</view>
            <view class="single-line-text" style="font-size: smaller;color: #888;">{{cast.role}}</view>
					</view>
				</block>
			</view>
		</scroll-view>
		<view class="content-title">标签：</view>
		<view class="flex-grid-layout tags-grid-layout">
			<block v-for="(tag,index) in movieInfo.info&&movieInfo.info['类型:'].split('/')" :key="index">
				<view class="tags-grid_item" :class="[{ 'tags-no-left': tagNoLeft(index) },{'tags-no-top':tagNoTop(index)}]">{{tag}}</view>
			</block>
		</view>
		<view class="content-title">剧情简介：</view>
		<text class="content-text" selectable="true" decode="true">{{replaceSpan(movieInfo.intra)}}</text>

		<view class="content-title">剧照：</view>
		<scroll-view class="yugao-view" scroll-x="true">
			<view class="yugao-view_container">
				<view class="juzhao-view_item" v-for="(photo ,index ) in movieInfo.relatedPics" :key="index">
					<image class="juzhao-image" mode="aspectFill" @click="_onYuGaoClick(index)" webp="true" :src="replaceUrl(photo)"></image>
				</view>
			</view>
		</scroll-view>

		<view class="content-title">
			精彩点评：
			<span class="content-hint-text">长按头像可互动</span>
		</view>

		<view class="content-item" v-for='(comment,index) in movieInfo.comments' :key="index">
			<view class="content-hor">
				<image class="comment-user-img" :src="replaceUrl(comment.image)"> </image>
				<view class="ver-layout comment-score">
          <view id="comment-user-name">{{comment.name}}</view>
          <rate-view :rateValue="parseInt(comment.score)/10"></rate-view>
        </view>
        <view id="comment-create-time">{{comment.time}}</view>
			</view>
			<view id="comment-content">{{comment.content}}</view>
		</view>
	</view>
</template>

<script>
	import rateView from 'components/custom/rate-view/rate-view.vue'
	export default {
		components: {
			rateView
		},
		data() {
			return {
				movieInfo: {},
				movieBg: ''
			}
		},
		onLoad(options) {
			console.log(options)
			this.getMovieDetail(options)
			this.getMovieComment(options)
		},
		methods: {
      tagNoLeft(index){
        return (index+1)%3!=1
      },
      tagNoTop(index){
        return (index+1)>3
      },
			getMovieDetail(options) {
				uni.showLoading({
					title: '加载中',
				})
				console.log(options)
				uniCloud.callFunction({
					name: 'api-request',
					data: {
						action: 'getMovieDetail',
						movie_id: options.subject
					},
					success: res => {
						uni.hideLoading()
						var movieObj = res.result.data;
						this.loading = false
						this.movieInfo = {...this.movieInfo,...movieObj}
					},
					fail: err => {
						console.error("error" + err)
						uni.hideLoading()
					}
				})
			},
      getMovieComment(options){
        uniCloud.callFunction({
          name: 'api-request',
          data: {
            action: 'getMovieComment',
            movie_id: options.subject
          },
          success: res => {
            uni.hideLoading()
            let comments = res.result.data;
            comments=comments.map(item=>{
              if(item.score)item.score=item.score.replace(new RegExp(/[a-zA-Z]/g),'')
              return item
            })
            this.movieInfo = {...this.movieInfo,comments}
          }
        })
      },
      replaceSpan(val){
        if(val)val=val.replace(new RegExp(/\n/g),'')
        return val
      },
			_onYuGaoClick(index) {
				let photos = this.movieInfo.relatedPics
				let newPhotos = []
				photos.forEach(item => {
					newPhotos.push(this.replaceUrl(item))
				})
				uni.previewImage({
					current: index,
					urls: newPhotos
				})
			},
			replaceUrl(image_url) {
				if (image_url == null)
					return image_url
        image_url = image_url.replace('https:', 'https://images.weserv.nl/?url=https:')
        return image_url
			},
		}
	}
</script>

<style>
	.color-container {
		grid-template-rows: 30px;
		grid-auto-rows: 30px;
	}

	.container {
		padding: 10px;
	}

	view {
		font-size: 14px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
	}

	text {
		display: flex;
		font-family: PingFangSC-Regular;
		font-weight: 500;
	}

	.header-view {
		background: #e6e6fa;
		width: 100%;
		border-radius: 5px;
	}

	.movie-image-view {
		width: 160px;
		height: 223px;
		flex-shrink: 0;
		/*flex的收缩为0，不压缩的意思*/
	}

	.movie-image {
		width: 100%;
		border-radius: 5px 0px 0px 5px;
	}

	.header-right {
		margin-left: 15px;
		color: #816161;
		margin-right: 5px;
		font-size: 17px;
		width: 50%;
	}

	.title-view {
		font-size: 19px;
		font-family: PingFang-SC-Bold;
		font-weight: 500;
	}

	.movie-att-item {
		display: flex;
		flex-direction: row;
		margin-top: 5px;
	}

	.movie-att_key {
		color: black;
		white-space: nowrap;
	}

	.movie-att_value {
		color: #8b4040;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.time-view {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: 9rem;
	}

	.casts-grid_item {
		width: 88px;
		text-align: center;
		padding: 5px 3px;

	}

	.tags-grid-layout {
    /*border: 1px gray solid;*/
	}

	.tags-grid_item {
    width: calc(33% - 3*2px - 2px);
    border: 1px gray solid;
		text-align: center;
    padding: 5px 3px;
	}
  .tags-no-left{
    border-left: none;
  }
  .tags-no-top{
    border-top: none;
  }
	.content-title {
		color: #8b4040;
		font-size: 18px;
		margin-top: 10px;
		margin-bottom: 7px;
		font-weight: bold;
	}

	.content-text {
		flex-wrap: wrap;
		text-indent: 20px;
		color: #444;
		font-weight: 300;
		text-align: justify;
		line-height: 27px;
		font-size: 14px;
		margin: 0 5px;
	}

	.avatar-img {
    max-width: 82px;
		width: 82px;
		height: 112px;
		border-radius: 5px;
	}

	.yugao-view {
		width: 100%;
		white-space: nowrap;
	}

	.yugao-view_container {
		display: flex;
	}

	.yugao-view_item {
		width: 175px;
		margin: 5px 5px;
	}

	.yugao-image {
		width: 175px;
		height: 100px;
		border-radius: 5px;
	}

	.juzhao-view_item {
		max-width: 250px;
		height: 175px;
		margin: 5px 5px;
	}

	.juzhao-image {
		background: #e4e4e4;
		max-width: 175px;
		height: 175px;
		border-radius: 5px;
	}

	.comment-user-img {
		width: 35px;
		height: 35px;
		border-radius: 35px;
		background: #816161;
	}

	.comment-user-img:hover {
		transform: rotate(20turn);
		transition-delay: 0s;
		transition-property: all;
		transition-duration: 9s;
		transition-timing-function: cubic-bezier(.5, 0, .5, 1);
	}
  .comment-score{
    margin-left: 10px;
    margin-top: -3px;
  }
	#comment-user-name {
    color: #37a;
    margin-bottom: 3px;
	}

	#comment-create-time {
		flex: 1;
    color: #999;
		text-align: right;
		font-size: 13px;
		line-height: 20px;
	}

	#comment-content {
		text-overflow: ellipsis;
		font-size: 13px;
		line-height: 1.7em;
		margin: 6px 12px;
    margin-left: 18px;
		margin-bottom: 10px;
	}

	.content-item {
    margin: 5px;
    border-bottom: 1px solid #eeeeee;
	}

	.star-view {
		font-size: 16px;
	}

	.share-class {
		position: fixed;
	}

	.content-hint-text {
		font-size: small;
		color: #a09898;
	}
</style>
